<!-- 账号密码登录页 -->
<template>
	<view class="uni-content">
		<view class="login-logo">
			<image :src="logo"></image>
		</view>
		<!-- 顶部文字 -->
		<text class="title title-box">账号密码登录</text>
		<uni-forms ref="form" :rules="rules" :modelValue="formData">
			<uni-forms-item name="userName">
				<uni-easyinput :focus="focusUsername" @blur="focusUsername = false" class="input-box"
					:inputBorder="false" v-model="formData.userName" placeholder="请输入手机号/用户名/邮箱" />
			</uni-forms-item>
			<uni-forms-item name="password">
				<uni-easyinput :focus="focusPassword" @blur="focusPassword = false" class="input-box" clearable
					type="password" :inputBorder="false" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<!-- <uni-captcha v-if="needCaptcha" focus ref="captcha" scene="login-by-pwd" v-model="captcha" /> -->
		<!-- 带选择框的隐私政策协议组件 -->
		<!-- <uni-id-pages-agreements scope="login" ref="agreements"></uni-id-pages-agreements> -->
		<button class="uni-btn" type="primary" @click="pwdLogin">登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				"captcha": "",
				"needCaptcha": false,
				"focusUsername": false,
				"focusPassword": false,
				"logo": "/static/logo.png",
				formData:{
					password: "",
					userName: ""
				},
				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}]
					}
				}
			}
		},
		onShow() {
			// #ifdef H5
			document.onkeydown = event => {
				var e = event || window.event;
				if (e && e.keyCode == 13) { //回车键的键值为13
					this.pwdLogin()
				}
			};
			// #endif
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			/**
			 * 密码登录
			 */
			pwdLogin() {
				const db = uniCloud.database()
				this.$refs.form.validate().then(res => {
					db.collection("config").where({
						userName:this.formData.userName,
						password:this.formData.password
					}).get().then((res)=>{
						var data = res.result.data
						if(data.length==0){
							uni.showToast({
								title:"账号或密码错误",
								icon:"none"
							})
							return false
						}else{
							uni.setStorageSync("userInfo", {
								nickName: data[0].userName,
								userName: data[0].userName,
								mobile: "",
								email: ""
							})
							uni.reLaunch({
								url: "/pages/book/list"
							})
						}
					})
				}).catch(err => {
					if(err[0].key=="password"){
						this.focusPassword = true
					}else{
						this.focusUsername = true
					}
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/login-page.scss";

	@media screen and (min-width: 690px) {
		.uni-content {
			max-height: 650px;
		}
	}

	.forget {
		font-size: 12px;
		color: #8a8f8b;
	}

	.link-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20px;
	}

	.link {
		font-size: 12px;
	}
</style>